<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="detail-container">
  <h2>{{ basicInfoLabel }}</h2>
  <lv-form [lvLabelColon]="false" class="formGroup">
    <lv-form-item>
      <lv-form-label>{{ nameLabel }}</lv-form-label>
      <lv-form-control>
        {{ drawData.clusterName }}
      </lv-form-control>
    </lv-form-item>
    <lv-form-item>
      <lv-form-label>{{ typeLabel }}</lv-form-label>
      <lv-form-control>
        {{
          drawData.clusterType === clusterType.local.value
            ? localClusterLabel
            : targetClusterLabel
        }}
      </lv-form-control>
    </lv-form-item>
    <lv-form-item>
      <lv-form-label>{{ statusLabel }}</lv-form-label>
      <lv-form-control>
        <aui-status
          [value]="drawData.status"
          type="Cluster_Status"
        ></aui-status>
      </lv-form-control>
    </lv-form-item>
    <lv-form-item>
      <lv-form-label>{{ ipLabel }}</lv-form-label>
      <lv-form-control>
        <ng-container *ngFor="let ip of drawData.ipArr">
          {{ ip }}<br />
        </ng-container>
      </lv-form-control>
    </lv-form-item>
  </lv-form>
  <h2 class="nodes-container">{{ 'common_controller_label' | i18n }}</h2>
  <div class="card-container">
    <div *ngFor="let item of nodesData" class="node-card">
      <div class="card-header">
        <div class="card-title">{{ item.nodeName }}</div>
        <div class="card-status">
          <aui-status
            [value]="item.status"
            type="Cluster_Node_Status"
          ></aui-status>
        </div>
      </div>
      <div class="card-content">
        <div class="card-row">
          <div class="row-label">
            {{ 'system_management_ipv4_label' | i18n }}
          </div>
          <div class="row-prop">
            {{ item.managementIPv4 | nil }}
          </div>
        </div>
        <div class="card-row">
          <div class="row-label">
            {{ 'system_management_ipv6_label' | i18n }}
          </div>
          <div class="row-prop">
            {{ item.managementIPv6 | nil }}
          </div>
        </div>
        <div class="card-row">
          <div class="row-label">
            {{ 'system_backup_network_ip_label' | i18n }}({{
              'system_data_backup_engine_label' | i18n
            }})
          </div>
          <div class="row-prop">
            {{ item.backupEngineIp | nil }}
          </div>
        </div>
        <div class="card-row">
          <div class="row-label">
            {{ 'system_backup_network_ip_label' | i18n }}({{
              'system_data_use_engine_label' | i18n
            }})
          </div>
          <div class="row-prop">
            {{ item.deeEngineIp | nil }}
          </div>
        </div>
        <div class="card-row">
          <div class="row-label">
            {{ 'system_archiving_network_ip_label' | i18n }}({{
              'system_data_archiving_engine_label' | i18n
            }})
          </div>
          <div class="row-prop">
            {{ item.archiveEngineIp | nil }}
          </div>
        </div>

        <div class="card-row">
          <div class="row-label">
            {{ 'common_replication_network_ip_address_label' | i18n }}({{
              'common_replication_archiving_engine_label' | i18n
            }})
          </div>
          <div class="row-prop">
            {{ item.copyEngineIp | nil }}
          </div>
        </div>

      </div>
    </div>
  </div>
  <lv-paginator
    lvMode="simple"
    [lvShowPageSizeOptions]="false"
    [lvPageSize]="pageSize"
    [lvTotal]="total"
    [hidden]="!total"
    [lvPageIndex]="pageIndex"
    (lvPageChange)="clusterPageChange($event)"
    [lvPageSizeOptions]="sizeOptions"
  ></lv-paginator>
</div>
